<template>
  <div class="print-container">
    <h1 class="report-title">大功率机车运行质量检修报告</h1>
    <div class="info-row" style="margin-left: 50px; display: flex; flex-wrap: wrap; justify-content: flex-start;">
      <div class="info-col" style="margin-left: 0px; flex: 0 0 25%; max-width: 25%;">
        车型：{{ dataTrainType }}
      </div>
      <div class="info-col" style="flex: 0 0 25%; max-width: 25%;">
        车号：{{ dataTrainNumber }}
      </div>
      <div class="info-col" style="flex: 0 0 25%; max-width: 25%;">
        所在端：{{ dataTrainDuan }}
      </div>
      <div class="info-col" style="flex: 0 0 25%; max-width: 25%;">
        报表时间：{{ dataTrainTime }}
      </div>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%;margin-left: 30px;margin-top: 20px"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      :span-method="objectSpanMethod"
    >
      <el-table-column prop="system" label="所属系统" />
      <el-table-column prop="component" label="检测部件" />
      <el-table-column prop="fault" label="检测故障" />
      <el-table-column label="检测情况">
        <el-table-column prop="result" label="检测结果" />
        <el-table-column prop="standard" label="检测标准" />
      </el-table-column>
    </el-table>
    <div class="print-button-container">
      <el-button type="primary" icon="el-icon-printer" @click="handlePrint">打印</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      redirect: null,
      otherQuery: null,
      isPrintToPdfFlag: false,
      dataTrainType: 'HXD1',
      dataTrainNumber: '1122',
      dataTrainDuan: 'A',
      dataTrainTime: '2024-11-11 16:58:58',
      // 存放所有的表头 一定要与tableData一致
      colFields: [
        'system',
        'component',
        'fault',
        'result',
        'standard'
      ],
      spanArr: [], // 存储合并单元格的开始位置

      tableData: [
        { system: '网络控制系统', component: '输入输出模块', fault: 'DXM11通信故障检查', result: '正常', standard: '机车网络控制系统检测到2S内DXM11生命信号无变化' },
        { system: '网络控制系统', component: '输入输出模块', fault: 'DXM14通信故障检查', result: '正常', standard: '机车网络控制系统检测到2S内DXM12生命信号无变化' },
        { system: '网络控制系统', component: '输入输出模块', fault: 'DXM13通信故障检查', result: '正常', standard: '机车网络控制系统检测到2S内DXM13生命信号无变化' },
        { system: '网络控制系统', component: '输入输出模块', fault: 'DXM13通信故障检查', result: '正常', standard: '机车网络控制系统检测到2S内DXM14生命信号无变化' },
        { system: '网络控制系统', component: '输入输出模块', fault: 'DXM14通信故障检查', result: '正常', standard: '机车网络控制系统检测到2S内DXM15生命信号无变化' }
      ]
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        const query = route.query
        console.log('clickroute', route)

        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
          console.log('clickroutequery', this.otherQuery)
          console.log('clickroutequeryredirect', this.redirect)
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.getSpanArr()
  },
  methods: {
    /**
     * 调用浏览器的打印方法
     */
    handlePrint() {
      window.print()
    },
    exportpdfwordex_1() {
      // this.trainloading = true
      // console.log('ceshi', 'ceshi22')
      // this.setTableStyle()
      this.setTableStyle()
      // eslint-disable-next-line no-undef
      // console.log('ceshi', 'ceshi11')
      this.setTableStyle()
      const iframe = document.getElementById('exportPdf_1')
      const doc = iframe.contentWindow.document
      // #print-table是自己的外层id
      const tcontent = document.querySelector('#print-table_1 .el-table').innerHTML // 获取table表中数据
      const contentpic = document.getElementById('picture_print_1').innerHTML
      // console.log('tcontent',tcontent)
      //  let tcontent_p='<div><h1 style="text-align: center">深圳14号线列车限界检测报告</h1></div>'+tcontent+'<div><h2 style="text-align: right">检测结果: &nbsp; &nbsp; &nbsp;'+this.detect_result+' &nbsp; &nbsp; &nbsp; </h2><h2 style="text-align: right">部门名称:_____________</h2><h2 style="text-align: right">签字确认:_____________</h2><h2 style="text-align: right">日期时间:_____________</h2></div>'
      const tcontent_p = contentpic + tcontent
      // &nbsp; &nbsp; &nbsp;
      // console.log('tcontent_p',tcontent_p)
      // 将获取到html标签数据赋值给iframe中组件中id中，组件的样式将影响html标签数据
      doc.getElementsByTagName('body')[0].innerHTML = tcontent_p

      iframe.contentWindow.print() // 调取iframe打印，数据过多打印会自动分页
      this.clearTableStyle()
      // this.trainloading = false
    },
    setTableStyle() {
      // table-designer-container是我自己的外层class，换成你自己的！！！！！！！！！！！！！！！
      const tableDomList = document
        .querySelector('.table-container_1')
        .getElementsByTagName('table')
      // console.log('tableDomList',tableDomList)
      // 去除element的覆盖层
      this.isPrintToPdfFlag = true
      const headRightTh_ = tableDomList[0]
        .getElementsByTagName('tr')[0]
        .getElementsByTagName('th')

      // console.log('headRightTh_',headRightTh_)
      headRightTh_[headRightTh_.length - 1].style.borderRight = '1px solid #ABABAB'
      // headRightTh_[headRightTh_.length - 1].style.fontSize = '40px'
      /*
      const headRightTh = tableDomList[0]
        .getElementsByTagName('tr')[1]
        .getElementsByTagName('th')

      //  console.log('headRightTh',headRightTh)
      headRightTh[headRightTh.length - 2].style.borderRight =
        '1px solid #ABABAB'
      // console.log('hello20',1)
      */
      // 遍历两个table
      const tableLength = tableDomList.length
      // console.log('headRightTh_length',tableLength)
      for (let i = 0; i < tableLength; i++) {
        tableDomList[i].setAttribute('border', '1')
        tableDomList[i].style.border = '#ffffff'
        const childTr = tableDomList[i].getElementsByTagName('tr')
        const childTrLength = childTr.length
        // console.log('hello20',2)
        // 第一个table是头部，没有td会报错
        if (i > 0) {
          for (let j = 0; j < childTrLength; j++) {
            const childTd = childTr[j].getElementsByTagName('td')
            const childTdLength = childTd.length
            // 修改最后一个的边框值
            // console.log('childTdLength',childTdLength)
            // console.log('childTd',childTd)
            // console.log('childTd[childTdLength - 1].style)',childTd[childTdLength - 1])
            if (childTdLength > 0 && childTd[childTdLength - 1].style) {
              childTd[childTdLength - 1].style.borderRight =
                '1px solid #ABABAB'
            }
            //  console.log('hello20',20)
            for (let k = 0; k < childTdLength; k++) {
              childTd[k].style.padding = '8px 0' // 改变之后与element高度一致
              childTd[k].style.valign = 'center'
              childTd[k].style.align = 'center'
              childTd[k].style.textAlign = 'center'

              // eslint-disable-next-line eqeqeq
              if (j == childTrLength - 1) {
                childTd[k].style.borderBottom = '1px solid #ABABAB'
              }
            }
          }
        } else {
          // 去除第一个table去除最右侧的空白th
          const childTr = tableDomList[i].getElementsByTagName('tr')
          const childTrLength = childTr.length
          for (let i = 0; i < childTrLength; i++) {
            const lastTh = childTr[i].querySelector('.gutter')
            if (lastTh) {
              lastTh.parentNode.removeChild(lastTh)
            }
          }
        }
      }

      // print-table是我自己的外层id，换成你自己的id
      return document.querySelector('#print-table_1 .el-table').innerHTML
    },
    // todo清除表格样式
    clearTableStyle() {
      // table-designer-container是我自己的外层class，换成你自己的！！！！！！！！！！！！！！！
      // console.log('hello0',0)
      const tableDomList = document
        .querySelector('.table-container_1')
        .getElementsByTagName('table')

      // 去除第一个table表头最右侧的边框
      /*
      const headRightTh = tableDomList[0]
        .getElementsByTagName('tr')[1]
        .getElementsByTagName('th')
      headRightTh[headRightTh.length - 2].style.borderRight = '1px solid #EBEEF5'
      // console.log('hello2',2)
*/
      const headRightTh_ = tableDomList[0]
        .getElementsByTagName('tr')[0]
        .getElementsByTagName('th')
      //  console.log('headRightTh_',headRightTh_)
      //  console.log('hello4',4)
      headRightTh_[headRightTh_.length - 1].style.borderRight = '1px solid #EBEEF5'
      //   console.log('hello5',5)
      headRightTh_[headRightTh_.length - 1].style.fontSize = '15px'
      //   console.log('hello3',3)
      // 去除右侧和最底部的样式
      for (let i = 0; i < tableDomList.length; i++) {
        tableDomList[i].setAttribute('border', '0')
        tableDomList[i].style.border = 'none'
        const childTr = tableDomList[i].getElementsByTagName('tr')
        const childTrLength = childTr.length
        // 第一个table是头部，没有td会报错
        if (i > 0) {
          for (let j = 0; j < childTrLength; j++) {
            const childTd = childTr[j].getElementsByTagName('td')
            const childTdLength = childTd.length
            // 修改最后一个的边框值
            if (childTdLength > 0 && childTd[childTdLength - 1].style) {
              childTd[childTdLength - 1].style.borderRight = 'none'
            }
            for (let k = 0; k < childTdLength; k++) {
              // eslint-disable-next-line eqeqeq
              if (j == childTrLength - 1) {
                childTd[k].style.borderBottom = '1px solid #EBEEF5'
              }
            }
          }
        }
      }
    },

    getSpanArr() {
      for (let i = 0; i < this.tableData.length; i++) {
        const row = i
        // let col = i % this.colCount;
        if (row === 0) {
          // i 表示行 j表示列
          for (let j = 0; j < this.colFields.length; j++) {
            this.spanArr[i * this.colFields.length + j] = {
              rowspan: 1,
              colspan: 1
            }
          }
        } else {
          for (let j = 0; j < this.colFields.length; j++) {
            // 当前和上一次的一样
            // 1. 合并所有列的相同数据单元格
            if (
              this.tableData[row][this.colFields[j]] ===
              this.tableData[row - 1][this.colFields[j]]
            ) {
              const beforeItem = this.spanArr[(row - 1) * this.colFields.length + j]
              this.spanArr[row * this.colFields.length + j] = {
                rowspan: 1 + beforeItem.rowspan, // 合并几行
                colspan: 1 // 合并几列,我这里只是跨行合并,不跨列合并,所以用的1
              }
              beforeItem.rowspan = 0
              beforeItem.colspan = 0
            } else {
              // rowspan 和 colspan 都为1表格此单元格不合并
              this.spanArr[row * this.colFields.length + j] = {
                rowspan: 1,
                colspan: 1
              }
            }
          }
        }
      }
      // 对数据进行倒序
      const stack = []
      for (let i = 0; i < this.colFields.length; i++) {
        for (let j = 0; j < this.tableData.length; j++) {
          // console.log("i=" + i + " j=" + j);
          // i 表示列 j表示行
          if (j === 0) {
            if (this.spanArr[j * this.colFields.length + i].rowspan === 0) {
              stack.push(this.spanArr[j * this.colFields.length + i])
            }
          } else {
            if (this.spanArr[j * this.colFields.length + i].rowspan === 0) {
              stack.push(this.spanArr[j * this.colFields.length + i])
            } else {
              stack.push(this.spanArr[j * this.colFields.length + i])
              while (stack.length > 0) {
                const pop = stack.pop()
                const len = stack.length
                this.spanArr[(j - len) * this.colFields.length + i] = pop
              }
            }
          }
        }
      }
      // console.log(this.spanArr);
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log(this.spanArr[rowIndex * this.colFields.length + columnIndex]);
      return this.spanArr[rowIndex * this.colFields.length + columnIndex]
    }
  }

}
</script>

<style scoped>
.report-title {
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}
.print-container {
  width: 1000px;
  margin: 0 auto;
}

.print-button-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
/*字体调黑*/
>>> .el-table {
  font-size: 16px;
  color: #000000;
}

>>> .el-table th {
  font-weight: normal;
  font-size: 18px;
}

>>> .el-table thead {
  color: #000000;
}

/*边框调黑*/
>>> .el-table::before {
  background-color: #000000;
}

>>> .el-table--border::after {
  background-color: #000000;
}

>>> .el-table--border th, >>> .el-table--border td {
  border-color: #000000;
}

>>>.el-table--group, >>>.el-table--border {
  border-color: #000000;
}

>>> .el-table th.is-leaf, >>> .el-table td {
  border-bottom: 1px solid #000000;
}

/*减小单元格间距*/
>>> .el-table th, >>> .el-table td {
  padding: 0 0;
}
/*显示底部边框 估计打印时伪元素把border覆盖了 height设为0隐藏伪元素*/
>>> .el-table::before {
  height: 0;
}

/*显示右边框*/
>>> .el-table--group::after, >>> .el-table--border::after {
  width: 0;
}

@media print {
  @page {
    /* 纵向打印 */
    /* size: portrait;*/

    /* 横向打印 */
    size: landscape;

    /* 去掉页眉页脚*/
    margin-top: 0;
    margin-bottom: 0;
  }

  /*打印不显示打印按钮*/
  .print-button-container {
    display: none !important;
  }
}
</style>
